<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>七牛上传</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"/>
    <script src="/js/qiniu/moxie.js"/>
    <script src="/js/qiniu/plupload.dev.js"/>
    <script src="/js/qiniu/qiniu.min.js"/>
    <script type="text/javascript">
        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, //month
                "d+": this.getDate(), //day
                "h+": this.getHours(), //hour
                "m+": this.getMinutes(), //minute
                "s+": this.getSeconds(), //second
                "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
                "S": this.getMilliseconds() //millisecond
            }
            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                }
            }
            return format;
        }
        $(function () {
            var fileDownUrl = "";
            qiniuUploader("btn", "upload-container", {
                'FileUploaded': function (up, file, info) {
                    fileDownUrl = up.getOption('domain') + "/" + JSON.parse(info).key;
                    $("#msgSuccess").empty().append(fileDownUrl).show();
                }
            });
            /*<![CDATA[*/
            function qiniuUploader(browse_button, container, init) {
                Qiniu.uploader({
                    runtimes: 'html5,flash,html4',
                    browse_button: browse_button,
                    uptoken_url: '/upload/token',
                    //为true表示文件名保存为随机码,false保存为当前文件名
                    unique_names: false,
                    save_key: false,
                    domain: 'http://oqdpapa6l.bkt.clouddn.com',
                    container: container,
                    max_file_size: '100mb',
                    flash_swf_url: '/js/Moxie.swf',
                    max_retries: 3,
                    dragdrop: true,
                    drop_element: container,
                    chunk_size: '4mb',
                    auto_start: true,
                    init: {
                        'FilesAdded': init != null && init.FilesAdded != null ? init.FilesAdded : function (up, files) {
                            plupload.each(files, function (file) {
                            });
                        },
                        'BeforeUpload': init != null && init.BeforeUpload != null ? init.BeforeUpload : function (up, file) {

                        },
                        'UploadProgress': init != null && init.UploadProgress != null ? init.UploadProgress : function (up, file) {
                            var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
//                            console.log(file.percent + "%", file.speed, chunk_size)
                            var progressWidth = $(".progressDiv").width();
                            $(".alert-success").css("width", new Number(file.percent * progressWidth / 100) >>> 0);
                        },
                        'FileUploaded': init != null && init.FileUploaded != null ? init.FileUploaded : function (up, file, info) {
                            // 查看简单反馈
                            $("#msgSuccess").show();
                            fileDownUrl = up.getOption('domain') + "/" + JSON.parse(info).key;
                            $("#msgSuccess").append(fileDownUrl)
                        },
                        'Error': init != null && init.Error != null ? init.Error : function (up, err, errTip) {
                        },
                        'UploadComplete': init != null && init.UploadComplete != null ? init.UploadComplete : function () {
                        },
                        'Key': init != null && init.Key != null ? init.Key : function (up, file) {
                            //返回值为保存文件名
//                            var fileName = file.name.substr(0, file.name.lastIndexOf("."));
//                            var suffix = file.name.substr(fileName.length);
//                            var key = fileName + "-" + new Date().format("yyyyMMddhhmmss") + suffix;
//                            return key
                            return file.name;
                        }
                    }
                });
            }
            $("input[id^='html5']").ssi_uploader({
                url: '#',
                dropZone: false,
                allowed: ['jpg', 'gif', 'txt', 'png', 'pdf']
            });
            /*]]>*/
        })

    </script>
    <link rel="stylesheet" type="text/css" href="/css/default.css"/>
    <style rel="stylesheet">
        .container {
            width: 500px;
            border: 1px solid;
            padding: 10px;
            text-align: center;
            margin: 100px auto
        }

        .upload-container {
            display: table
        }

        .container label {
            margin: 10px;
            display: block
        }

        .upload-btn {
            background: rgba(0, 150, 136, .87);
            outline: none;
            text-decoration: none;
            color: white;
            display: block;
            padding: 10px;
            float: left
        }

        .upload-btn span {
            color: white
        }

        .progressDiv {
            width: 350px;
            height: 39px;
            float: left;
            margin-left: 15px;
            margin-bottom: 15px;
            background: rgba(50, 50, 50, .15)
        }

        .alert-success {
            background: rgba(0, 150, 136, .87);
            width: 0;
            height: 100%
        }

        nobr {
            width: 468px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <link rel="stylesheet" href="js/ssi-uploader/ssi-uploader.min.css"/>
    <script src="js/ssi-uploader/ssi-uploader.min.js"/>
    <script>
        $(function () {
            $("input[id^='html5']").ssi_uploader({
                url: '#',
                dropZone: false,
                allowed: ['jpg', 'gif', 'txt', 'png', 'pdf']
            });
        })
    </script>
</head>
<body>
<div class="container">
    <label>图片上传</label>
    <div id="upload-container" class="upload-container">
        <a class="upload-btn" id="btn" href="#">
            <i class="icon-white icon-plus"></i>
            <span>选择文件</span>
        </a>
        <div class="progressDiv">
            <div class="alert-success"></div>
        </div>
        <nobr id="msgSuccess" style="display: none;"></nobr>
    </div>
</div>
</body>
</html>